<template>
	<view>
		<view class="cc-bg-ef5 padding-h30" >
			<view class="cc-rows cc-flex-vcenter" style="padding: 80rpx 0;">
				<fui-avatar src="../../static/image/tx.png" width="140" height="140"/>
				<view class="cc-columns cc-lineHeight-60 margin-l20" >
					<text class="cc-size-38 cc-txt-bold">{{store.userInfo.account}}</text>
					<text class="cc-size-26 cc-color-999">ID:{{store.userInfo.phone}}</text>
				</view>
			</view>
		</view>
		<view class="cc-absolute col-100" style="top: 20%;">
			<view class="cc-bg-white  border-radius-16" style="margin: 0 32rpx;">
				<view class="cc-txt-bold" style="padding: 30rpx 20rpx;">会员中心</view>
				<view class="cc-rows cc-flex-vcenter cc-space-between" style="margin: 0 20rpx 20rpx 20rpx;">
					<view class="cc-flex-vcenter cc-columns" @click="gotoData">
						<text class="iconfont cc-size-55 cc-color-4c">&#xe615;</text>
						<view class="padding-v10 cc-size-30">资料概况</view>
					</view>
					<view class="cc-flex-vcenter cc-columns" @click="gotoApplicationList">
						<text class="iconfont cc-size-55 cc-color-4c">&#xe65b;</text>
						<view class="padding-v10 cc-size-30">应用管理</view>
					</view>
					<view class="cc-flex-vcenter cc-columns">
						<text class="iconfont cc-size-55 cc-color-4c" @click="gotoDeviceList">&#xe684;</text>
						<view class="padding-v10 cc-size-30">设备管理</view>
					</view>
		
				</view>
			</view>
			<view class="cc-bg-white border-radius-16 padding-h30 margin-h30">

				<view class="cc-rows cc-flex-vcenter cc-space-between cc-height-80" @click="gotoDevelop()">
					<text>关于我们</text>
					<fui-icon name="arrowright" size="32" />
				</view>
				<view class="cc-rows cc-flex-vcenter cc-space-between cc-height-80">
					<text>设置</text>
					<fui-icon name="arrowright" size="32" />
				</view>
			</view>
			<fui-dialog :show="show" :content="content" maskClosable @click="onClick" @close="onClose" :buttons="buttons"/>
			<view class="col-80" style="position: fixed;bottom: 50rpx;">
				<fui-button @click="showDialog(1)" background="linear-gradient(to bottom right, #4cccc5 100%, #02DBC0 100%)" :margin="['0','75rpx']" 
				border-width="0" text="退出登录" radius="50rpx"/>
			</view>
		</view>
	</view>
</template>

<script>
	import {ref} from 'vue'
	import { useInfoStore } from '@/stores/info'
	export default {
		setup(){
			const show = ref(false)
			const buttons = ref([{text: '确定',color: '#4cccc5'}])
			const content = ref('是否确定退出登录？')
			const store = useInfoStore()
			return {
				store,content,show,buttons
			}
		},
		methods: {

			loginOut() {
				this.store.logout()
				uni.redirectTo({
					url:'/pages/login/login'
				})
			},
			//对话框
			showDialog(type) {
				if (type === 1) {
					this.show = true
				}
			},
			onClick(e) {
				console.log(e)
				this.loginOut()
			},
			//设置maskClosable为true时（点击遮罩可关闭），需要配合@close事件一起使用，通过控制show来达到关闭效果
			onClose(e) {
				this.show = false
			},
			//资料概况
			gotoData(){
				uni.navigateTo({
					url:'/pages/my/personalData'
				})
			},
			//应用管理
			gotoApplicationList(){
				uni.navigateTo({
					url:'/pages/index/applicationList'
				})
			},
			//设备管理
			gotoDeviceList(){
				uni.navigateTo({
					url:'/pages/index/deviceList'
				})
			},
			//开发文档
			gotoDevelop(){
				uni.navigateTo({
					url:'/pages/about/about'
				})
			},
			
		}
	}
</script>

<style>
.cc-bg-ef5{ background-image: linear-gradient(to right, #D6FEF5 , #F2F3EB);height: 370rpx;}
</style>
